<template>
  <div class="personalRanking">
    <div class="container pt-4">
      <div class="row">
        <div class="col-12">
          <div class="pointsRule">
            <ul id="list">
              <li style="z-index:6;background-image: linear-gradient(to right, #005bea ,#00c6fb)" class="green" @click="gotoHome()"><a><span>首页</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:5;background-image: linear-gradient(to right, #005bea ,#00c6fb)"  @click="gotoNav()"><a><em class="before"></em><span>预算管理</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:4;background-image: linear-gradient(to right, #005bea ,#00c6fb)"  @click="gotoCost()"><a><em class="before"></em><span>收入</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:3;background-image: linear-gradient(to right, #005bea ,#00c6fb)"  @click="$router.push('/profitDetails')"><a><em class="before"></em><span>{{project}}</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:2;background-image: linear-gradient(to right, #005bea ,#00c6fb)"  @click="$router.push('/monthlyDetails')"><a><em class="before"></em><span>每月详情</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:1;background-color: #ffc107;"><a><em class="before"></em><span style="color: #4e555b;">个人排名</span><i style="background-color:#ffc107;"></i></a></li>
            </ul>
          </div>
        </div>
      </div>
      <div>
        <div class="row justify-content-center mt-5 mb-3 ">
          <h4>{{project}}项目个人排名/<span>{{thisMonth}}</span></h4>
        </div>
        <div class="row mt-4 ">
          <div class="col-12">
            <el-table
              :data="tableData"
              stripe
              style="width: 100%">
              <el-table-column
                type="index"
                label="序号"
                width="180">
              </el-table-column>
              <el-table-column
                prop="project"
                label="员工"
                width="180">
              </el-table-column>
              <el-table-column
                prop="actualAmount"
                label="实际值">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import echarts from 'echarts'
  export default {
    name: "personalRanking",
    data(){
      return{
        project: '',
        tableData: [],
        thisMonth: 1,
        loading: {}
      }
    },
    created(){
      this.project = window.sessionStorage.getItem('type3')
      this.thisMonth = window.sessionStorage.getItem('personOfMonth')
      this.getIncomeByPerson()
    },
    methods:{
      //跳转到首页
      gotoHome: function(){
        this.$router.push("/index")
      },
      //跳转到书吧
      gotoNav: function(){
        this.$router.push("/nav2")
      },
      //跳转到费用
      gotoCost: function(){
        this.$router.push("/profit")
      },
      getIncomeByPerson(){
        this.loading = this.$loading({
          lock: true,//lock的修改符--默认是false
          text: 'Loading',//显示在加载图标下方的加载文案
          spinner: 'el-icon-loading',//自定义加载图标类名
          background: 'rgba(0, 0, 0, 0.7)',//遮罩层颜色
          target: document.querySelector('#table')//loadin覆盖的dom元素节点
        });
        this.$http.get(
          '/api/getIncomeByPerson',
          {
            params: {
              project: this.project,
              month: this.thisMonth
            }
          }).then(res => {
          this.tableData = res.data
          this.loading.close()
        })
      }
    }
  }
</script>

<style>

  .personalRanking{
    height: 220%;
    background: white;
  }
  .personalRanking  table{
    margin-bottom: 0;
  }
  .personalRanking table tr td,
  .personalRanking table tr th{
  }
  .personalRanking table tr:nth-child(odd){
    background: #eeeeee;
  }
  .personalRanking table tr td{
  }
  #monthCanvas{
    border: 1px solid #cbd3da;
    border-radius: 20px;
    padding: 20px 40px;
  }
  .personalRanking h4{
    letter-spacing: 4px;
  }
  .personalRanking h4 span{
    letter-spacing: 2px;
    color: #adb5bd;
  }
  .personalRanking .el-table{
    border: 1px solid #cbd3da;
  }

</style>
